<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue全家桶_stu/03_依赖包/vue.js"></script>
</head>

<body>
    <div id="root">
        <p><button @click="count++">点击+1</button> <span>{{count}}</span></p>
        <p><button @click="obj.count++">点击+1</button> <span>{{obj.count}}</span></p>
        <p><button @click="arr[0].count++">点击+1</button> <span>{{arr[0].count}}</span></p>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                count: 1,
                obj: {
                    count: 1
                },
                arr: [{ count: 1 }]
            },
            //属性监听
            watch: {
                //函数类型(当count发生变化时触发)
                count(newVal, oldVal) {
                    console.log(newVal, oldVal)
                },
                //函数类型写法 监听不到复杂数据类型内部的变化需要开启深度监听
                obj(newVal, oldVal) {
                    console.log(newVal, oldVal)
                },

                //深度监听
                obj: {
                    immediate:true, //页面加载让监听立即执行一次
                    deep: true,//开启深度监听
                    handler(a) {
                        console.log('obj发生变化')
                        console.log(a)
                    }
                },
                arr:{
                    deep:true,
                    handler(){
                        console.log('arr发生了变化')
                    }
                }
            }
        })
    </script>
</body>

</html>